<template>
	<div class="image-item" @click="myValue = !myValue">
		<div class="checkbox center" v-if="props.checkboxIsShow">
			<el-checkbox @click.stop v-model="myValue" />
		</div>
		<div class="image center" @click.stop>
			<el-image :src="props.src" :preview-src-list="previewSrcList" fit="fill" />
		</div>
		<el-tooltip
			v-if="props.text"
			:effect="store.colorScheme"
			:content="props.text"
			:show-after="800"
			placement="top">
			<div class="text beyond-hiding-reverse">
				{{ props.text.split('').reverse().join('') }}
			</div>
		</el-tooltip>
	</div>
</template>

<script setup lang="ts">
import { ref, watch, computed } from 'vue';
import { useRootStore } from '@v/store';

const store = useRootStore();

const emits = defineEmits(['update:modelValue']);

const props = defineProps({
	modelValue: {
		type: Boolean,
		default: false,
	},
	checkboxIsShow: {
		type: Boolean,
		default: true,
	},
	src: String,
	text: String,
});

const previewSrcList = computed(() => {
	if (props.src) {
		return [props.src];
	}
});

let myValue = ref(props.modelValue);

watch(myValue, (s) => {
	emits('update:modelValue', s);
});
watch(
	() => props.modelValue,
	(s) => {
		myValue.value = s;
	}
);
</script>

<style scoped lang="scss">
.image-item {
	height: 52px;
	display: flex;
	align-items: center;
	background-color: var(--opacity-purity-color-8);
	cursor: pointer;
	border-radius: 4px;
	margin: 6px 6px 0 6px;
	&:hover {
		background-color: var(--opacity-purity-color-14);
	}

	.checkbox {
		margin: 0 15px;
		:deep(.el-checkbox) {
			height: auto;
		}
	}
	.image {
		margin-right: 10px;
		:deep(.el-image) {
			width: 30px;
			height: 30px;
		}
	}
	.center {
		display: flex;
		align-items: center;
	}
	.text {
		font-size: 13px;
		user-select: none;
		padding-right: 15px;
	}
}
</style>
